<div data-id="contenidoUsuario" class="container contUser">
    <h1 class="tituloMis">Mis Series</h1>
    <p id="añadirMsgSeries"></p>
    <div class="tabbable" id="ocultaSeries">
        <ul class="nav nav-tabs estilosPestanas">
            <li class="active">
                <a href="#ser1" data-toggle="tab">Todas</a>
            </li>
            <li>
                <a href="#ser2" data-toggle="tab">Pendientes</a>
            </li>
            <li>
                <a href="#ser3" data-toggle="tab">Siguiendo</a>
            </li>
            <li>
                <a href="#ser4" data-toggle="tab">Finalizadas</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="ser1">
                <p data-bind="visible: getSeries(getListaUsuario()).length == 0">No hay series seleccionadas</p>
                <table class="table table-striped table-bordered tablaUsu1" id="tablaSeries1" data-id="tablaUsuario" data-bind="visible: getSeries(getListaUsuario()).length > 0">
                    <p data-bind="visible: getSeries(getListaUsuario()).length > 0">Hay en tu colección <span data-bind="text: getSeries(getListaUsuario()).length"></span> series, has finalizado <span data-bind="text:cuantasHay('serie','Finalizado')" ></span>, 
                        estas siguiendo <span data-bind="text:cuantasHay('serie','Siguiendo')" ></span> y tienes pendientes <span data-bind="text:cuantasHay('serie','Pendiente')" ></span></p>
                    <thead class="cabeceraUsu">
                        <th class="not"> Título</th>
                        <th> Género </th>
                        <th> Año </th>
                        <th> Estado </th>

                    </thead>
                    <tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
                        <!-- ko if:categoria == 'serie' -->
                        <tr data-bind="attr: {id: idItem}">
                            <td class="not"><a href="#" data-bind="click: function(){$root.hacerCargaCap(idItem)}"><span data-bind="text: titulo"> </span></a></td>
                            <td><span data-bind="text: genero"> </span></td>
                            <td><span data-bind="text: anio"> </span></td>
                            <td>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
                                <ul class="dropdown-menu">
                                    <li class="separacion3">
                                        <a class="vista2" value="Vista" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
                                    </li>
                                </ul>
                            </div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>

            <div class="tab-pane" id="ser2">
                <p data-bind="visible: cuantasHay('serie','Pendiente') == 0">No hay series pendientes</p>
                <table class="table table-striped table-bordered tablaUsu1" data-id="tablaUsuario" data-bind="visible: cuantasHay('serie','Pendiente') > 0">
                    <p data-bind="visible: cuantasHay('serie','Pendiente') > 0">Tienes pendientes <span data-bind="text:cuantasHay('serie','Pendiente')" ></span> series</p>
                    <thead class="cabeceraUsu">
                        <th class="not"> Título</th>
                        <th> Género </th>
                        <th> Año </th>
                        <th> Estado </th>

                    </thead>
                    <tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
                        <!-- ko if:categoria == 'serie' && estado2()=='Pendiente'-->
                        <tr data-bind="attr: {id: idItem}">
                            <td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
                            <td><span data-bind="text: genero"> </span></td>
                            <td><span data-bind="text: anio"> </span></td>
                            <td>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
                                <ul class="dropdown-menu">
                                    <li class="separacion3">
                                        <a class="vista2" value="Vista" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
                                    </li>
                                </ul>
                            </div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>

            <div class="tab-pane" id="ser3">
                <p data-bind="visible: cuantasHay('serie','Siguiendo') == 0">No hay series siguiendo</p>
                <table class="table table-striped table-bordered tablaUsu1" data-id="tablaUsuario" data-bind="visible: cuantasHay('serie','Siguiendo') > 0">
                    <p data-bind="visible: cuantasHay('serie','Siguiendo') > 0">Estas siguiendo <span data-bind="text:cuantasHay('serie','Siguiendo')" ></span> series</p>
                    <thead class="cabeceraUsu">
                        <th class="not"> Título</th>
                        <th> Género </th>
                        <th> Año </th>
                        <th> Estado </th>

                    </thead>
                    <tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
                        <!-- ko if:categoria == 'serie' && estado2()=='Siguiendo'-->
                        <tr data-bind="attr: {id: idItem}">
                            <td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
                            <td><span data-bind="text: genero"> </span></td>
                            <td><span data-bind="text: anio"> </span></td>
                            <td>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
                                <ul class="dropdown-menu">
                                    <li class="separacion3">
                                        <a class="vista2" value="Vista" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
                                    </li>
                                </ul>
                            </div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>

            <div class="tab-pane" id="ser4">
                <p data-bind="visible: cuantasHay('serie','Finalizado') == 0">No hay series finalizadas</p>
                <table class="table table-striped table-bordered tablaUsu1" data-id="tablaUsuario" data-bind="visible: cuantasHay('serie','Finalizado') > 0">
                    <p data-bind="visible: cuantasHay('serie','Finalizado') > 0">Has finalizado <span data-bind="text:cuantasHay('serie','Finalizado')" ></span> series</p>
                    <thead class="cabeceraUsu">
                        <th class="not"> Título</th>
                        <th> Género </th>
                        <th> Año </th>
                        <th> Estado </th>

                    </thead>
                    <tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">
                        <!-- ko if:categoria == 'serie' && estado2()=='Finalizado'-->
                        <tr data-bind="attr: {id: idItem}">
                            <td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
                            <td><span data-bind="text: genero"> </span></td>
                            <td><span data-bind="text: anio"> </span></td>
                            <td>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
                                <ul class="dropdown-menu">
                                    <li class="separacion3">
                                        <a class="vista2" value="Vista" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
                                    </li>
                                    <li class="separacion3">
                                        <a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
                                    </li>
                                </ul>
                            </div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>
            
        </div>

    </div>
</div>